<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #calendar {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }

        #calendar .header {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        #calendar .header .last,
        #calendar .header .next {
            cursor: pointer;
        }

        #calendar .header .center {
            text-align: center;
        }

        #calendar .header .center .year {
            display: block;
        }

        #calendar .content {}

        #calendar .content .con-head {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background-color: #eee;
        }

        #calendar .content .con-head span {
            width: 42px;
        }

        #calendar .content .date-box {
            display: flex;
            flex-wrap: wrap;
            text-align: center;
        }

        #calendar .content .date-box li {
            margin: 5px 0;
            width: 42px;
            list-style: none;
        }

        #calendar .content .date-box li.active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="calendar">
        <div class="header">
            <span class="last" onclick="last()">上一月</span>
            <div class="center">
                <span class="year"></span>
                <span class="month"></span>
            </div>
            <span class="next" onclick="next()">下一月</span>
        </div>
        <div class="content">
            <div class="con-head">
                <span>日</span>
                <span>一</span>
                <span>二</span>
                <span>三</span>
                <span>四</span>
                <span>五</span>
                <span>六</span>
            </div>
            <ul class="date-box"></ul>
        </div>
    </div>
    <script>

        //  获取时间方法
        var date = new Date();
        function calendar() {
            var day = date.getDate();   //获取日期
            var month = date.getMonth();    //获取分份
            var year = date.getFullYear();  //获取年份
            var dayMax = new Date(year, month + 1, 0).getDate();    //获得每月天数
            var week = new Date(year, month, 1).getDay();   //每个月的第一天是周几

            //  设置月份数组
            var monthArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
            //  获取日历的各个dom
            var yeadDom = document.getElementsByClassName('year')[0];
            var monthDom = document.getElementsByClassName('month')[0];
            var dateBox = document.getElementsByClassName('date-box')[0];

            // 开始渲染
            yeadDom.innerText = year;   //渲染年份
            monthDom.innerText = monthArr[month];   //渲染月份

            //  初始化天数
            var dayHTML = '';
            //  遍历每月第一天的空天数
            for (var i = 0; i < week; i++) {
                dayHTML += "<li></li>";
            }
            //  遍历天数
            for (var i = 1; i <= dayMax; i++) {
                if (i === day) {
                    dayHTML += "<li class='active'>" + i + "</li>";
                } else {
                    dayHTML += "<li>" + i + "</li>";
                }
            }
            //  渲染天数
            dateBox.innerHTML = dayHTML;
        }
        calendar();

        function last() {
            date.setMonth(date.getMonth() - 1);
            calendar();
        }
        function next() {
            date.setMonth(date.getMonth() + 1);
            calendar();
        }
    </script>
</body>

</html>